import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:gourmet/color/hex.dart';
import 'package:gourmet/entity/discounts_activity.dart';
import 'package:gourmet/entity/merchant_service.dart';
import 'package:gourmet/extensions/ex_widget.dart';
import 'package:gourmet/route/index.dart';
import 'package:gourmet/ui/custom_popup.dart';
import 'package:gourmet/ui/sliver_persistent_container.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/radian.dart';
import 'package:gourmet/utils/styles.dart';
import 'package:gourmet/utils/svg.dart';
import 'package:gourmet/utils/tools.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class DeliciousGroupController extends GetxController {
  RxBool visible = RxBool(false);

  RxBool nextVisible = RxBool(false);

  RxDouble opacity = RxDouble(0);

  late ScrollController scrollController;

  double minHeight = 44 + Get.mediaQuery.padding.top;

  GlobalKey selectedGroupKey = GlobalKey(debugLabel: 'selectedGroupKey');

  late TextEditingController textEditingController;

  double maxHeight = 0.0;

  List<String> selected = [
    '综合排序',
    '最近距离',
    '好拼优先',
    '起送价最低',
    '配送最快',
    '配送费最低',
    '人均从低到高',
    '人均从高到低'
  ];

  RxInt selectIdx = RxInt(0);

  Rx<SfRangeValues> values = Rx(const SfRangeValues(0, 100));

  List<Rx<DiscountsActivity>> activity = [];

  List<Rx<MerchantService>> service = [];

  @override
  void onInit() {
    initData();
    SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(
        statusBarBrightness: Brightness.dark,
        statusBarIconBrightness: Brightness.dark,
      ),
    );
    textEditingController = ToolsUtils.editingController('');
    scrollController = ScrollController()
      ..addListener(() {
        visible.value = scrollController.offset > 100;
        nextVisible.value = scrollController.offset > maxHeight - 40;
      });
    super.onInit();
  }

  @override
  void onReady() {
    super.onReady();
    final renderBox =
        selectedGroupKey.currentContext!.findRenderObject() as RenderBox;
    Offset offset = renderBox.localToGlobal(Offset.zero);
    maxHeight = offset.dy + renderBox.size.height;
  }

  @override
  void onClose() {
    scrollController.dispose();
    textEditingController.dispose();
    super.onClose();
  }

  void initData() {
    activity.add(Rx(DiscountsActivity(name: '平台补贴')));
    activity.add(Rx(DiscountsActivity(name: '满返代金券')));
    activity.add(Rx(DiscountsActivity(name: '满赠活动')));
    activity.add(Rx(DiscountsActivity(name: '特价商品')));
    activity.add(Rx(DiscountsActivity(name: '首单立减')));
    activity.add(Rx(DiscountsActivity(name: '进店领券')));
    activity.add(Rx(DiscountsActivity(name: '减配送费')));
    activity.add(Rx(DiscountsActivity(name: '店铺满减')));

    service.add(Rx(MerchantService(name: '平台转送')));
    service.add(Rx(MerchantService(name: '到店自取')));
    service.add(Rx(MerchantService(name: '新店铺')));
    service.add(Rx(MerchantService(name: '开发票')));
    service.add(Rx(MerchantService(name: '0价起送')));
    service.add(Rx(MerchantService(name: '品牌商家')));
  }
}

class DeliciousGroupPage extends GetView<DeliciousGroupController> {
  const DeliciousGroupPage({super.key});

  @override
  Widget build(BuildContext context) {
    return buildBody(context);
  }

  Widget buildBody(BuildContext context) {
    return MediaQuery.removeViewPadding(
      context: context,
      removeBottom: true,
      removeTop: true,
      removeLeft: true,
      removeRight: true,
      child: Scaffold(
        backgroundColor: HexColor(ColorsUtils.colorF5f5),
        body: CustomScrollView(
          controller: controller.scrollController,
          physics: const ClampingScrollPhysics(),
          slivers: [
            SliverToBoxAdapter(
              child: Container(
                height: 160,
                padding: Get.mediaQuery.padding,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      ColorsUtils.rgba(16, 197, 91, 1),
                      ColorsUtils.rgba(16, 197, 91, 1),
                      ColorsUtils.rgba(0, 153, 153, 1),
                      ColorsUtils.rgba(0, 153, 153, 1),
                    ],
                    stops: const [0, 0, 1, 1],
                    transform: GradientRotation(
                      RadianUtils.angleToRadian(90),
                    ),
                  ),
                ),
                child: Column(
                  children: [
                    Row(
                      children: [
                        Container(
                          width: 40,
                          height: 44,
                          alignment: Alignment.center,
                          child: const Icon(
                            CupertinoIcons.chevron_back,
                            size: 20,
                            color: Colors.white,
                          ),
                        ).onTap(Get.back),
                        Expanded(
                          child: Container(
                            alignment: Alignment.center,
                            height: 44,
                            child: Text(
                              '美食团购',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize16,
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                          ),
                        ),
                        Stack(
                          clipBehavior: Clip.none,
                          children: [
                            Container(
                              width: 40,
                              height: 44,
                              alignment: Alignment.center,
                              child: SvgUtils.assetName('u247',
                                  width: 21, height: 22),
                            ),
                            Positioned(
                              top: 5,
                              right: 5,
                              child: CircleAvatar(
                                radius: 7.5,
                                backgroundColor: Colors.white,
                                child: Text(
                                  '2',
                                  style: StylesUtils.textStyle(
                                    color: HexColor('#009A98'),
                                    fontSize: StylesUtils.fontSize11,
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.only(
                          left: 15, right: 15, top: 15, bottom: 15),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          RichText(
                            text: TextSpan(
                              children: [
                                const WidgetSpan(
                                    child: Icon(
                                      CupertinoIcons.placemark,
                                      size: 14,
                                      color: Colors.white,
                                    ),
                                    alignment: PlaceholderAlignment.middle),
                                TextSpan(
                                  text: ' 深圳北站中心公园 ',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize13),
                                ),
                                const WidgetSpan(
                                    child: Icon(
                                      CupertinoIcons.chevron_down,
                                      size: 12,
                                      color: Colors.white,
                                    ),
                                    alignment: PlaceholderAlignment.middle),
                              ],
                            ),
                          ),
                          Text(
                            '随时退 · 过期退',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize12,
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      alignment: Alignment.center,
                      height: 35,
                      child: TextField(
                        cursorHeight: 20,
                        cursorWidth: 3,
                        cursorRadius: const Radius.circular(2),
                        cursorColor: Colors.blue,
                        controller: controller.textEditingController,
                        decoration: InputDecoration(
                          fillColor: Colors.white,
                          hintText: '请输入商家、商品名称',
                          hintStyle: StylesUtils.customTextStyle(
                              color: ColorsUtils.color9999),
                          isCollapsed: true,
                          filled: true,
                          isDense: true,
                          prefixIcon: Icon(
                            CupertinoIcons.search,
                            size: 20,
                            color: HexColor(ColorsUtils.color9999),
                          ),
                          prefixIconConstraints: const BoxConstraints.expand(
                              width: 40, height: 35),
                          contentPadding:
                              const EdgeInsets.symmetric(vertical: 5),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(17.5),
                            borderSide: BorderSide.none,
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(17.5),
                            borderSide: BorderSide.none,
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(17.5),
                            borderSide: BorderSide.none,
                          ),
                          constraints: const BoxConstraints(
                              maxHeight: 35, maxWidth: 345),
                        ),
                        readOnly: true,
                        onTap: () {
                          // Get.toNamed(Routes.searchStore);
                        },
                      ),
                    )
                  ],
                ),
              ),
            ),
            Obx(
              () => SliverVisibility(
                visible: controller.visible.value,
                sliver: SliverPersistentContainer(
                  maxExtent: 90,
                  minExtent: 90,
                  pinned: true,
                  child: Container(
                    padding:
                        EdgeInsets.only(top: Get.mediaQuery.padding.top + 10),
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [
                          ColorsUtils.rgba(16, 197, 91, 1),
                          ColorsUtils.rgba(16, 197, 91, 1),
                          ColorsUtils.rgba(0, 153, 153, 1),
                          ColorsUtils.rgba(0, 153, 153, 1),
                        ],
                        stops: const [0, 0, 1, 1],
                        transform: GradientRotation(
                          RadianUtils.angleToRadian(90),
                        ),
                      ),
                    ),
                    child: Row(
                      children: [
                        Container(
                          alignment: Alignment.center,
                          padding: const EdgeInsets.symmetric(horizontal: 15),
                          child: Text.rich(
                            TextSpan(
                              children: [
                                const WidgetSpan(
                                  child: Icon(
                                    CupertinoIcons.chevron_back,
                                    size: 20,
                                    color: Colors.white,
                                  ),
                                ),
                                TextSpan(
                                  text: ' 美食团购',
                                  style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize16,
                                    fontWeight: FontWeight.w700,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ).onTap(Get.back),
                        Align(
                          alignment: Alignment.centerLeft,
                          child: TextField(
                            cursorHeight: 20,
                            cursorWidth: 3,
                            cursorRadius: const Radius.circular(2),
                            cursorColor: Colors.blue,
                            controller: controller.textEditingController,
                            decoration: InputDecoration(
                              fillColor: Colors.white,
                              hintText: '请输入商家、商品名称',
                              hintStyle: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color9999),
                              isCollapsed: true,
                              filled: true,
                              isDense: true,
                              prefixIcon: Icon(
                                CupertinoIcons.search,
                                size: 20,
                                color: HexColor(ColorsUtils.color9999),
                              ),
                              prefixIconConstraints:
                                  const BoxConstraints.expand(
                                      width: 40, height: 35),
                              contentPadding:
                                  const EdgeInsets.symmetric(vertical: 5),
                              enabledBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(17.5),
                                borderSide: BorderSide.none,
                              ),
                              focusedBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(17.5),
                                borderSide: BorderSide.none,
                              ),
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(17.5),
                                borderSide: BorderSide.none,
                              ),
                              constraints: const BoxConstraints(
                                  maxHeight: 35, maxWidth: 240),
                            ),
                            readOnly: true,
                            onTap: () {
                              // Get.toNamed(Routes.searchStore);
                            },
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: Padding(
                key: controller.selectedGroupKey,
                padding: const EdgeInsets.only(top: 10, bottom: 15),
                child: Column(
                  children: [
                    StaggeredGrid.count(
                      crossAxisCount: 5,
                      children: [
                        Column(
                          children: [
                            CircleAvatar(
                              radius: 22.5,
                              backgroundColor: HexColor(ColorsUtils.colorF9dc),
                              child: SvgUtils.assetName('u282',
                                  width: 33, height: 26),
                            ),
                            Container(
                              alignment: Alignment.center,
                              margin: const EdgeInsets.only(top: 5),
                              child: Text(
                                '全部',
                                style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize13,
                                  color: ColorsUtils.colorFf64,
                                ),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            CircleAvatar(
                              radius: 22.5,
                              backgroundColor: Colors.white,
                              child: Image.network(
                                'https://cdn7.axureshop.com/demo2024/1877666/images/%E6%99%AE%E9%80%9A%E5%88%86%E7%B1%BB%E5%88%97%E8%A1%A8/u1086.png',
                                width: 39,
                                height: 26,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 5),
                              alignment: Alignment.center,
                              child: Text(
                                '快餐小吃',
                                style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize13,
                                  color: ColorsUtils.color7979,
                                ),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            CircleAvatar(
                              radius: 22.5,
                              backgroundColor: Colors.white,
                              child: Image.network(
                                'https://cdn7.axureshop.com/demo2024/1877666/images/%E7%BE%8E%E9%A3%9F%E5%9B%A2%E8%B4%AD/u3534.png',
                                width: 45,
                                height: 45,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              alignment: Alignment.center,
                              margin: const EdgeInsets.only(top: 5),
                              child: Text(
                                '休闲饮茶',
                                style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize13,
                                  color: ColorsUtils.color7979,
                                ),
                              ),
                            ),
                          ],
                        ),
                        Column(
                          children: [
                            CircleAvatar(
                              radius: 22.5,
                              backgroundColor: Colors.white,
                              child: Image.network(
                                'https://cdn7.axureshop.com/demo2024/1877666/images/%E7%BE%8E%E9%A3%9F%E5%9B%A2%E8%B4%AD/u3534.png',
                                width: 45,
                                height: 45,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              alignment: Alignment.center,
                              margin: const EdgeInsets.only(top: 5),
                              child: Text(
                                '火锅自助',
                                style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize13,
                                  color: ColorsUtils.color7979,
                                ),
                              ),
                            ),
                          ],
                        ),
                        Column(
                          children: [
                            CircleAvatar(
                              radius: 22.5,
                              backgroundColor: Colors.white,
                              child: Image.network(
                                'https://cdn7.axureshop.com/demo2024/1877666/images/%E7%BE%8E%E9%A3%9F%E5%9B%A2%E8%B4%AD/u3542.png',
                                width: 45,
                                height: 45,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              alignment: Alignment.center,
                              margin: const EdgeInsets.only(top: 5),
                              child: Text(
                                '中西餐',
                                style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize13,
                                  color: ColorsUtils.color7979,
                                ),
                              ),
                            )
                          ],
                        ),
                      ],
                    ),
                    Padding(
                      padding:
                          const EdgeInsets.only(left: 0, right: 0, top: 20),
                      child: Builder(builder: (ctx) {
                        return Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Wrap(
                              spacing: 15,
                              crossAxisAlignment: WrapCrossAlignment.center,
                              alignment: WrapAlignment.start,
                              children: [
                                Text(
                                  '综合排序▾',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.colorFf64),
                                ),
                                Text(
                                  '销量',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color7979),
                                ),
                                Text(
                                  '速度',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color7979),
                                ),
                              ],
                            ).onTap(() {
                              openPopup(ctx, 10);
                            }),
                            Text(
                              '全部筛选▾',
                              style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color7979,
                              ),
                            ).onTap(() {
                              openBottomSheet();
                            }),
                          ],
                        ).paddingSymmetric(horizontal: 15);
                      }),
                    ),
                  ],
                ),
              ),
            ),
            Obx(
              () => SliverVisibility(
                visible: controller.nextVisible.value,
                sliver: SliverPersistentContainer(
                  maxExtent: 95,
                  minExtent: 95,
                  pinned: true,
                  child: Container(
                    height: 95,
                    color: Colors.white,
                    child: Column(
                      children: [
                        SizedBox(
                          height: 40,
                          child: Row(
                            children: [
                              Expanded(
                                child: Center(
                                  child: Text(
                                    '全部',
                                    style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize13,
                                      color: ColorsUtils.colorFf64,
                                    ),
                                  ),
                                ),
                              ),
                              Expanded(
                                child: Center(
                                  child: Text(
                                    '快餐小吃',
                                    style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize13,
                                      color: ColorsUtils.color7979,
                                    ),
                                  ),
                                ),
                              ),
                              Expanded(
                                child: Center(
                                  child: Text(
                                    '休闲饮茶',
                                    style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize13,
                                      color: ColorsUtils.color7979,
                                    ),
                                  ),
                                ),
                              ),
                              Expanded(
                                child: Center(
                                  child: Text(
                                    '火锅自助',
                                    style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize13,
                                      color: ColorsUtils.color7979,
                                    ),
                                  ),
                                ),
                              ),
                              Expanded(
                                child: Center(
                                  child: Text(
                                    '中西餐',
                                    style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize13,
                                      color: ColorsUtils.color7979,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          child: Builder(builder: (ctx) {
                            return Padding(
                              padding:
                                  const EdgeInsets.only(left: 15, right: 15),
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Wrap(
                                    spacing: 15,
                                    crossAxisAlignment:
                                        WrapCrossAlignment.center,
                                    alignment: WrapAlignment.start,
                                    children: [
                                      Text(
                                        '综合排序▾',
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.colorFf64),
                                      ),
                                      Text(
                                        '销量',
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color7979),
                                      ),
                                      Text(
                                        '速度',
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color7979),
                                      ),
                                    ],
                                  ).onTap(() {
                                    openPopup(ctx);
                                  }),
                                  Text(
                                    '全部筛选▾',
                                    style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color7979,
                                    ),
                                  ).onTap(() {
                                    openBottomSheet();
                                  }),
                                ],
                              ),
                            );
                          }),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: Column(
                children: [
                  for (var i = 0; i < 20; i++)
                    Container(
                      padding:
                          const EdgeInsets.only(top: 15, left: 15, right: 15),
                      margin: EdgeInsets.only(
                          left: (Get.width - 345) / 2,
                          right: (Get.width - 345) / 2,
                          bottom: 10),
                      width: 345,
                      height: 130,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(5),
                            child: Image.network(
                              'https://img0.baidu.com/it/u=655977884,3582260165&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                              width: 100,
                              height: 100,
                              fit: BoxFit.fill,
                            ),
                          ),
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.only(left: 10),
                              child: Column(
                                children: [
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    margin: const EdgeInsets.only(bottom: 10),
                                    child: Text(
                                      '华莱士-凤凰广场2店',
                                      style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize16,
                                        fontWeight: FontWeight.w700,
                                        color: ColorsUtils.color0000,
                                      ),
                                    ),
                                  ),
                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Text.rich(
                                        TextSpan(
                                          children: [
                                            TextSpan(
                                              text: '4.5分  ',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                fontSize:
                                                    StylesUtils.fontSize12,
                                                color: ColorsUtils.colorFf66,
                                              ),
                                            ),
                                            TextSpan(
                                              text: '西式快餐  人均￥45',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                color: ColorsUtils.color7979,
                                                fontSize:
                                                    StylesUtils.fontSize12,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      Text(
                                        '2.2km',
                                        style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize12,
                                          color: ColorsUtils.color7979,
                                        ),
                                      ),
                                    ],
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(
                                      TextSpan(
                                        children: [
                                          WidgetSpan(
                                              child: Container(
                                                alignment: Alignment.center,
                                                constraints:
                                                    const BoxConstraints.expand(
                                                        width: 14, height: 15),
                                                decoration: BoxDecoration(
                                                  color: HexColor(
                                                      ColorsUtils.colorFf64),
                                                  borderRadius:
                                                      BorderRadius.circular(1),
                                                ),
                                                child: Text(
                                                  '团',
                                                  style: StylesUtils
                                                      .customTextStyle(
                                                    fontSize:
                                                        StylesUtils.fontSize12,
                                                  ),
                                                ),
                                              ),
                                              alignment:
                                                  PlaceholderAlignment.middle),
                                          TextSpan(
                                            text: ' ￥35 ',
                                            style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color0000,
                                            ),
                                          ),
                                          TextSpan(
                                            text: '￥38',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.colorCccc,
                                                fontSize:
                                                    StylesUtils.fontSize12,
                                                decoration:
                                                    TextDecoration.lineThrough,
                                                decorationColor: HexColor(
                                                    ColorsUtils.colorCccc),
                                                decorationStyle:
                                                    TextDecorationStyle.solid,
                                                decorationThickness: 1.0),
                                          ),
                                          TextSpan(
                                            text: ' 鸡腿汉堡双人套餐',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.color0000,
                                                fontSize:
                                                    StylesUtils.fontSize12),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(
                                      TextSpan(
                                        children: [
                                          WidgetSpan(
                                              child: Container(
                                                alignment: Alignment.center,
                                                constraints:
                                                    const BoxConstraints.expand(
                                                        width: 14, height: 15),
                                                decoration: BoxDecoration(
                                                  color: HexColor(
                                                      ColorsUtils.colorFf64),
                                                  borderRadius:
                                                      BorderRadius.circular(1),
                                                ),
                                                child: Text(
                                                  '团',
                                                  style: StylesUtils
                                                      .customTextStyle(
                                                    fontSize:
                                                        StylesUtils.fontSize12,
                                                  ),
                                                ),
                                              ),
                                              alignment:
                                                  PlaceholderAlignment.middle),
                                          TextSpan(
                                            text: ' ￥35 ',
                                            style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color0000,
                                            ),
                                          ),
                                          TextSpan(
                                            text: '￥38',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.colorCccc,
                                                fontSize:
                                                    StylesUtils.fontSize12,
                                                decoration:
                                                    TextDecoration.lineThrough,
                                                decorationColor: HexColor(
                                                    ColorsUtils.colorCccc),
                                                decorationStyle:
                                                    TextDecorationStyle.solid,
                                                decorationThickness: 1.0),
                                          ),
                                          TextSpan(
                                            text: ' 鸡腿汉堡双人套餐',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.color0000,
                                                fontSize:
                                                    StylesUtils.fontSize12),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ).onTap(() {
                      Get.toNamed(Routes.deliciousMain);
                    }),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  void openPopup(BuildContext context, [double offsetY = 0]) {
    showPopup(
        context: context,
        offsetY: offsetY,
        builder: (_) {
          return Obx(
            () => Container(
              color: Colors.white,
              height: 300,
              child: SingleChildScrollView(
                physics: const ClampingScrollPhysics(),
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: controller.selected
                      .asMap()
                      .map(
                        (key, value) => MapEntry(
                          key,
                          Container(
                            height: 45,
                            padding: const EdgeInsets.symmetric(horizontal: 15),
                            child: GestureDetector(
                              onTap: () {
                                controller.selectIdx.value = key;
                                Get.back();
                              },
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    value,
                                    style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize13,
                                      color: activeColorByIndex(key),
                                    ),
                                  ),
                                  Icon(
                                    CupertinoIcons.checkmark,
                                    size: 20,
                                    color: ColorsUtils.parseColorFromHexString(
                                      activeColorByIndex(key),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ),
                        ),
                      )
                      .values
                      .toList(),
                ),
              ),
            ),
          );
        });
  }

  void showPopup(
      {required BuildContext context,
      required WidgetBuilder builder,
      double? elevation,
      Color? shadowColor,
      double offsetY = 0,
      Duration animationDuration = const Duration(milliseconds: 200)}) {
    final RenderBox button = context.findRenderObject()! as RenderBox;

    debugPrint('button = ${button.size}');

    final RenderBox overlay =
        Navigator.of(context).overlay!.context.findRenderObject()! as RenderBox;

    debugPrint('overlay = ${overlay.size} \twidth = ${Get.width}');

    Offset offset = Offset(0.0, button.size.height + offsetY);

    debugPrint('bottom = ${button.size.bottomRight(Offset.zero)}');

    RelativeRect position = RelativeRect.fromRect(
      Rect.fromPoints(
        button.localToGlobal(offset, ancestor: overlay),
        button.localToGlobal(Offset(Get.width, 0) + offset, ancestor: overlay),
      ),
      Offset.zero & overlay.size,
    );

    Navigator.of(context).push(CustomPopupRoute(
        position: position,
        builder: builder,
        elevation: elevation,
        shadowColor: shadowColor,
        animationDuration: animationDuration,
        barrierLabel:
            MaterialLocalizations.of(context).modalBarrierDismissLabel));
  }

  String activeColorByIndex(int index) {
    if (index == controller.selectIdx.value) {
      return ColorsUtils.colorFf64;
    }
    return ColorsUtils.color9999;
  }

  void openBottomSheet() {
    Get.bottomSheet(
        Container(
          height: 500,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(15.r),
                topRight: Radius.circular(15.r)),
          ),
          child: Column(
            children: [
              Container(
                padding: const EdgeInsets.only(top: 10),
                height: 40,
                child: Stack(
                  children: [
                    Center(
                      child: Text(
                        '全部筛选',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color3333,
                            fontSize: StylesUtils.fontSize16),
                      ),
                    ),
                    Positioned(
                      width: 40,
                      top: 0,
                      right: 0,
                      bottom: 0,
                      child: IconButton(
                        onPressed: () {
                          Get.back();
                        },
                        icon: Icon(
                          CupertinoIcons.xmark,
                          size: 15,
                          color: ColorsUtils.parseColorFromHexString(
                              ColorsUtils.color9999),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                padding: const EdgeInsets.only(left: 15, right: 15, top: 25),
                child: Column(
                  children: [
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '优惠活动',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color7979,
                            fontSize: StylesUtils.fontSize13),
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.symmetric(vertical: 15),
                      alignment: Alignment.centerLeft,
                      child: Wrap(
                        spacing: 5,
                        runSpacing: 10,
                        children: controller.activity.map((e) {
                          return Obx(() {
                            return GestureDetector(
                              onTap: () {
                                e.update((v) {
                                  v?.checked = !v.checked;
                                });
                              },
                              child: Container(
                                constraints: const BoxConstraints.expand(
                                    width: 110, height: 30),
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                    color: e.value.checked
                                        ? ColorsUtils.rgba(250, 245, 245, 1)
                                        : ColorsUtils.parseColorFromHexString(
                                            ColorsUtils.colorF5f5),
                                    borderRadius: BorderRadius.circular(2.r),
                                    border: Border.all(
                                        color:
                                            ColorsUtils.rgba(244, 195, 186, 1),
                                        width: e.value.checked ? 1 : 0)),
                                child: Text(
                                  e.value.name,
                                  style: StylesUtils.customTextStyle(
                                      color: e.value.checked
                                          ? ColorsUtils.colorFf64
                                          : ColorsUtils.color7979),
                                ),
                              ),
                            );
                          });
                        }).toList(),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '商家服务',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color7979,
                            fontSize: StylesUtils.fontSize13),
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.symmetric(vertical: 15),
                      alignment: Alignment.centerLeft,
                      child: Wrap(
                        spacing: 5,
                        runSpacing: 10,
                        crossAxisAlignment: WrapCrossAlignment.center,
                        alignment: WrapAlignment.start,
                        children: controller.service.map((e) {
                          return Obx(() {
                            return GestureDetector(
                              onTap: () {
                                e.update((v) {
                                  v?.checked = !v.checked;
                                });
                              },
                              child: Container(
                                constraints: const BoxConstraints.expand(
                                    width: 110, height: 30),
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                    color: e.value.checked
                                        ? ColorsUtils.rgba(250, 245, 245, 1)
                                        : ColorsUtils.parseColorFromHexString(
                                            ColorsUtils.colorF5f5),
                                    borderRadius: BorderRadius.circular(2.r),
                                    border: Border.all(
                                        color:
                                            ColorsUtils.rgba(244, 195, 186, 1),
                                        width: e.value.checked ? 1 : 0)),
                                child: Text(
                                  e.value.name,
                                  style: StylesUtils.customTextStyle(
                                      color: e.value.checked
                                          ? ColorsUtils.colorFf64
                                          : ColorsUtils.color7979),
                                ),
                              ),
                            );
                          });
                        }).toList(),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '人均价格筛选 (元)',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color7979,
                            fontSize: StylesUtils.fontSize13),
                      ),
                    ),
                    Obx(() => Padding(
                          padding: const EdgeInsets.symmetric(vertical: 10),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                '${controller.values.value.start}',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.colorFf64),
                              ),
                              Text(
                                '${controller.values.value.end}',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.colorFf64),
                              )
                            ],
                          ),
                        )),
                    Obx(() => SfRangeSlider(
                        min: 0,
                        max: 100,
                        activeColor: ColorsUtils.parseColorFromHexString(
                            ColorsUtils.colorFf64),
                        stepSize: 1,
                        values: controller.values.value,
                        onChanged: (SfRangeValues values) {
                          controller.values.value = values;
                        }))
                  ],
                ),
              ),
              Container(
                padding: const EdgeInsets.only(top: 15),
                alignment: Alignment.center,
                child: Container(
                  constraints:
                      const BoxConstraints.expand(width: 340, height: 45),
                  child: Row(
                    children: [
                      Expanded(
                          child: GestureDetector(
                        onTap: () {
                          controller.values.value = controller.values.value
                              .copyWith(start: 0, end: 100);
                          for (var action in controller.service) {
                            action.update((s) => s?.checked = false);
                          }
                          for (var action in controller.activity) {
                            action.update((s) => s?.checked = false);
                          }
                        },
                        child: Container(
                          decoration: BoxDecoration(
                              color: ColorsUtils.parseColorFromHexString(
                                  ColorsUtils.colorF5f5),
                              borderRadius: const BorderRadius.only(
                                  topLeft: Radius.circular(22.5),
                                  bottomLeft: Radius.circular(22.5))),
                          alignment: Alignment.center,
                          child: Text(
                            '重置',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color0000,
                                fontSize: StylesUtils.fontSize16),
                          ),
                        ),
                      )),
                      Expanded(
                          child: GestureDetector(
                        onTap: () {
                          Get.back();
                        },
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: const BorderRadius.only(
                                topRight: Radius.circular(22.5),
                                bottomRight: Radius.circular(22.5)),
                            gradient: LinearGradient(
                                //linear-gradient(90deg, rgba(255, 153, 0, 1) 0%, rgba(255, 153, 0, 1) 0%, rgba(255, 100, 77, 1) 100%, rgba(255, 100, 77, 1) 100%)
                                colors: [
                                  ColorsUtils.rgba(255, 153, 0, 1),
                                  ColorsUtils.rgba(255, 153, 0, 1),
                                  ColorsUtils.rgba(255, 100, 77, 1),
                                  ColorsUtils.rgba(255, 100, 77, 1)
                                ],
                                stops: const [
                                  0,
                                  0,
                                  1.0,
                                  1.0
                                ],
                                transform: GradientRotation(
                                    RadianUtils.angleToRadian(90))),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            '筛选',
                            style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize16),
                          ),
                        ),
                      ))
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
        barrierColor: ColorsUtils.rgba(0, 0, 0, 0.298039215686275),
        isScrollControlled: true,
        elevation: 0);
  }
}
